<template>
  <div class="collection-store-list">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-empty description="暂无数据" v-if="dataList.length===0" />
      <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false">
        <div class="product-box" v-for="item in collectionStore" :key="item.id" @click="productChange(item)">
          <div class="product-info">
            <div class="imgPath">
              <van-image :width="$tools.toPX(140)" :height="$tools.toPX(140)" fit="contain" class="img" lazy-load :src="item.shop_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="24" />
                </template>
              </van-image>
            </div>
            <div class="detail">
              <div class="name">{{item.shop_name}}</div>
              <div class="flex-end">
                <div class="funs">粉丝人数 {{item.fav_num}}</div>
                <div class="collection-btn" :class="{active: !item.isFavorite}" @click.stop="storeFavoriteFun(item)">{{item.isFavoriteTxt}}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'CollectionStore',
  mixins: [mixins],
  data () {
    return {
      isLoading: false,
      apiUrl: 'storeFavorite',
      apiType: 'store',
      paramsUrl: 'list'
    };
  },
  computed: {
    collectionStore: {
      get () {
        return this.handleList(this.dataList) || [];
      },
      set (val) {
        this.dataList = val;
        console.log(val);
      }
    }
  },
  mounted () {
    this.getGoodsList();
  },
  methods: {
    getGoodsList () {
      this.getList('storeFavorite', true);
    },
    productChange (data) {
      this.$router.push({ 'path': '/store', query: { id: data.id, index: 2 } });
    },
    // 获取优惠劵列表
    getCoupon () { },
    // 收藏店铺
    storeFavoriteFun (data) {
      this.$toast.loading({ duration: 0 });
      this.$API.store.storeFavorite({ id: data.id }, !data.isFavorite ? 'add' : 'cancel').then(res => {
        if (!res.code) {
          this.getGoodsList();
          this.$toast(!data.isFavorite ? '收藏成功' : '取消收藏');
        }
      });
    },
    handleList (list) {
      this.dataList = list.map(item => {
        if (item.isFavoriteTxt) {
          return item;
        } else {
          item.isFavorite = true;
          item.isFavoriteTxt = '已收藏';
          return item;
        }
      });
      return this.dataList;
    }
  }
};
</script>
<style scoped lang="less">
.collection-store-list {
  height: 100%;
  overflow: auto;
  .product-info {
    padding-right: 0;
  }
}
</style>
